<template>
  <div>
    <van-skeleton :loading="loading" v-if="loading">
      <template #template>
        <van-skeleton-image style="width: 100%; height: 180px" />
      </template>
    </van-skeleton>
    <van-swipe class="carousel" :autoplay="3000" v-else>
      <van-swipe-item v-for="(item, index) in carouselList" :key="index">
        <!-- <img :src="item.img" class="img" /> -->
        <van-image :src="item.img">
          <template v-slot:loading>
            <van-loading type="spinner" size="20"></van-loading>
          </template>
        </van-image>
      </van-swipe-item>
    </van-swipe>
    <van-divider />
    <van-skeleton :loading="loading">
      <template #template>
        <div v-for="(item, index) in productList" :key="index" :style="{ display: 'flex', marginBottom: '16px', width: '100%' }">
          <van-skeleton-image />
          <div :style="{ flex: 1, marginLeft: '16px' }">
            <van-skeleton-paragraph row-width="60%" />
            <van-skeleton-paragraph />
            <van-skeleton-paragraph />
          </div>
        </div>
      </template>
    </van-skeleton>
    <div v-for="(item, index) in productList" :key="index">
      <van-card num="2" :price="item.original_price" :desc="item.desc" :title="item.pname" :thumb="item.imgUrl" />
    </div>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-card v-for="(item, index) in productList" :key="index" :price="item.sale_price" :desc="item.desc" :title="item.pname" :thumb="item.imgUrl">
        <template #tags>
          <van-space>
            <van-tag plain type="primary">原价：{{ item.original_price }}</van-tag>
            <van-divider />
            <van-tag plain type="primary">销量：{{ item.sales }}</van-tag>
          </van-space>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { useHomeSerivice } from '@/api/home'
import { UserGoods } from '@/interface/model/home'
export default defineComponent({
  name: 'Index',
  setup() {
    const homeSerivice = useHomeSerivice()
    const state = {
      loading: ref(false),
      finished: ref(false),
      error: ref(false),
      carouselList: ref<Array<UserGoods.GoodsData>>([]),
      productList: ref<Array<UserGoods.GoodsData>>([]),
      pageSize: ref<number>(5),
      pageCount: ref<number>(1)
    }
    const getCarouselList = async () => {
      const result = await homeSerivice.getCarouselList({})
      state.carouselList.value = result.result
    }
    const onLoad = async () => {
      state.loading.value = true
      const result = await homeSerivice
        .getGoodsList({
          pagesize: state.pageSize.value,
          pagecount: state.pageCount.value
        })
        .catch(() => {
          state.error.value = true
        })
      if (result.code == 1) {
        state.pageCount.value = state.pageCount.value + 1
        state.productList.value = [...state.productList.value, ...result.result]
        console.log(state.productList.value)
      } else {
        state.finished.value = true
      }
      state.loading.value = false
    }
    onMounted(() => {
      getCarouselList()
      //  getProductList()
    })
    return {
      ...state,
      onLoad
    }
  }
})
</script>

<style lang="less" scoped>
.img {
  width: 100%;
  height: 150px;
}
.carousel {
  height: 180px;
  overflow: hidden;
  &.van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    height: 100%;
  }
}
</style>
